<style lang="less" rel="stylesheet/less" scoped>
/*导航*/
ul.nav {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  border-top: 1px solid #e1e1e1;
  padding-top: 0.15rem;
  font-size: 0.26rem;
  line-height: 0.36rem;
  color: #868686;
  background-color: #ffffff;
  li.nav-btn {
    padding: 0.48rem 0.12rem 0;
    background: url("../assets/img/tab.png") center no-repeat;
    overflow: hidden;
    background-size: 4.2rem 1.3rem;
    width: 0.84rem;
    text-align: center;
    white-space:nowrap;
  }
  li.recommended {
    background-position: left -0.84rem;
  }
  li.logistics {
    background-position: -1.68rem -0.84rem;
  }
  li.collection {
    background-position: -2.52rem -0.84rem;
  }
  li.my-center {
    background-position: -3.36rem -0.84rem;
  }
  li.is-recommended {
    background-position: left top;
    color: #078301;
  }
  li.is-logistics {
    background-position: -1.68rem top;
    color: #078301;
  }
  li.is-collection {
    background-position: -2.52rem top;
    color: #078301;
  }
  li.is-my-center {
  background-position: -3.36rem top;
  color: #078301;
  }
}
</style>
<template>
  <div class="home">
    <router-view></router-view>
    <ul class="nav box-around">
      <li :class="['nav-btn' ,isActive==0 ? 'is-recommended' : 'recommended']" @click="pathTo(0,$event)">推荐</li>
      <li :class="['nav-btn' ,isActive==1 ? 'is-logistics' : 'logistics']" @click="pathTo(1,$event)">流通</li>
      <li :class="['nav-btn' ,isActive==2 ? 'is-collection' : 'collection']" @click="pathTo(2,$event)">藏书</li>
      <li :class="['nav-btn' ,isActive==3 ? 'is-my-center' : 'my-center']" @click="pathTo(3,$event)">我的</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "home",
  //数据
  data() {
    return {
      isActive:0, //当前
    };
  },
  //组件
  components: {},
  //初始化数据
  mounted() {
    // document.title = "";
    let $index = location.href;
    if ($index.search("recommended") > -1) {
      this.isActive = 0;
    } else if ($index.search("logistics") > -1) {
      this.isActive = 1;
    } else if ($index.search("collection") > -1) {
      this.isActive = 2;
    } else if ($index.search("center") > -1) {
      this.isActive = 3;
    }
  },
  //方法
  methods: {
    pathTo(el, event) {
      this.isActive = el;
    //   console.log(event);
      switch (el) {
        case 0:
          this.$router.replace({ name: "Recommended" });
          break;
        case 1:
          this.$router.replace({ name: "Logistics" });
          break;
        case 2:
          this.$router.replace({ name: "Collection" });
          break;
        case 3:
          this.$router.replace({ name: "Center" });
          break;

      }
    }
  },
  //计算属性
  computed: {},
  //监听数据变化
  watch: {},
  filters: {}
};
</script>
